<template>
  <div class="page">
    <div class="page-info">
      <div class="page-box items2">
        <div class="product-img">
          <img :src="goodsData.photo" alt="" />
        </div>
        <div class="product-detail">
          <h2>{{ goodsData.name }}</h2>
          <p class="kexuan">{{ goodsData.description }}</p>
          <p class="change">红色历史博物馆自营</p>
          <span class="price">{{ goodsData.price }}元 <span class="del">{{ goodsData.price*1.5 }}元</span></span>
          <div class="box-5">
            <div class="add"><a href="javascript:;" style="text-decoration: none;" @click="addCart">加入购物车</a></div>
            <div class="like"><a href="javascript:;" style="text-decoration: none;">喜欢</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="price-information">
    <div class="contain1">
      <div class="juzhong">
        <p>价格说明</p>
        <img src="@/assets/price.jpg" alt=""/>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getGoodsByIdService,addCartService} from '@/api/goods';

const route = useRoute();
const router = useRouter();

const goodsId = ref(route.query.id);
const goodsData = ref({});
const activeName = ref('first');
const loadGoods = async () => {
  try {
    const res = await getGoodsByIdService(goodsId.value);
      goodsData.value = res.data;
  } catch (error) {
    ElMessage.error('加载商品失败');
  }
};

const handleClick = (tab) => {
  activeName.value = tab.props.name;
};

const addCart = async () => {
  const data = {
    goodsnumber: 1,
    goodsId: goodsId.value,
  };
  try {
    const res = await addCartService(data);
    ElMessage.success('加入购物车成功');
  } catch (error) {
    ElMessage.error('加入购物车失败');
  }
};

const navTo = (url) => {
  router.push(url);
};

onMounted(() => {
  loadGoods();
});
</script>

<style scoped>
.del {
  font-style: normal;
  text-decoration: line-through;
}
.page {
  width: 1400px;
  height: 600px;
}
.page .page-info {
  width: 1226px;
  margin: 0 auto;
}
.page .page-info .page-box {
  width: 1226px;
}
.page .page-info .page-box .product-img {
  float: left;
  width: 606px;
}
.page .page-info .page-box .product-img img {
  width: 560px;
  height: 560px;
}
.page .page-info .page-box .product-detail {
  margin-left: 20px;
  width: 600px;
  float: left;
}
.page .page-info .page-box .product-detail h2 {
  font-size: 24px;
  font-weight: 400;
  color: #212121;
  margin-top: 37px;
}
.page .page-info .page-box .product-detail .kexuan {
  color: #b0b0b0;
  padding-top: 8px;
  line-height: 1.5;
}
.page .page-info .page-box .product-detail .change {
  color: #ff6700;
  margin-top: 14px;
}
.page .page-info .page-box .product-detail .price {
  display: block;
  border-bottom: 1px solid #c8c6c6;
  width: 600px;
  height: 40px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 18px;
  color: #ff6700;
}
.page .page-info .page-box .product-detail .price .del {
  text-decoration: line-through;
  font-size: 14px;
  margin-left: 5px;
  color: #b0b0b0;
}
.page .page-info .page-box .product-detail .box {
  background-color: #fafafa;
  border: 1px solid #b0b0b0;
  margin-top: 25px;
  width: 600px;
  height: 50px;
  padding: 30px 50px;
}
.page .page-info .page-box .product-detail .box span {
  margin-right: 14px;
  font-size: 14px;
}
.page .page-info .page-box .product-detail .box .aaa {
  margin-left: 17px;
}
.page .page-info .page-box .product-detail .box-5 {
  width: 600px;
  height: 54px;
}
.page .page-info .page-box .product-detail .box-5 .add a {
  display: block;
  width: 300px;
  height: 54px;
  background-color: #ff6700;
  line-height: 54px;
  font-size: 16px;
  text-align: center;
  color: #fff;
  float: left;
  margin-right: 20px;
}
.page .page-info .page-box .product-detail .box-5 .like a {
  display: block;
  line-height: 54px;
  font-size: 16px;
  text-align: center;
  color: #fff;
  float: left;
  width: 142px;
  height: 54px;
  background-color: #b0b0b0;
}
.price-information {
  background-color: #f5f5f5;
}
.price-information .contain1 {
  width: 1519px;
  height: 315px;
}
.price-information .contain1 .juzhong {
  width: 1226px;
  height: 315px;
  margin: 0 auto;
  padding: 20px 0;
}
.price-information .contain1 .juzhong p {
  font-size: 22px;
  font-weight: 400;
  margin: 20px 0;
}
.price-information .contain1 .juzhong img {
  width: 1226px;
  height: 189px;
}
</style>